<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/favicon.png" type="image/x-icon">
    <title>车联网云服务平台</title>
    <link rel="stylesheet" href="element/theme-default/index.css">
    <script type="text/javascript">
        document.write("<link rel='stylesheet' href='css/responsive.css?v=" + Math.random() + "'>");
        document.write("<link rel='stylesheet' href='css/index.css?v=" + Math.random() + "'>");
    </script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element/index.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
        .index_wrap{
            padding:0;
        }
        .menu .el-menu-item,.menu .el-submenu__title{
            height:46px;
            line-height: 46px;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) { 
            width: 200px;
            min-height: 400px;
        }
        .el-menu{
            border:0;
        }
        .el-breadcrumb__inner{
            font-size:16px;
			color:#fff;
        }
    </style>
</head>
<body>
<div class="index_wrap" v-cloak v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在加载中，请稍后！">
    <header @click="infoVisible=false">
        <div class="header_left">
            <div class="logo_group" @click="reloadPage">
				
               <div class="logo" @click="reload">
                   <img src="images/login_logo.png">
               </div>
               <div class="logo_text">车联网云服务平台</div>
            </div>
            <div class="crumbs" @click="isCollapse=!isCollapse">
                <img v-show="!isCollapse" src="images/crumbs_icon.png">
                <img v-show="isCollapse" src="images/crumbs_icon2.png">
            </div>
            <div class="refresh" @click="reload">
                <img src="images/refresh_icon.png">
            </div>
        </div>
        <div class="header_right">
            <div v-if="!isFullScreen" class="screen_icon" @click="fullScreen">
                <img src="images/screen_icon.png">
            </div>
            <div v-else class="screen_icon" @click="exitFullscreen">
                <img src="images/exitscreen_icon.png">
            </div>
            <div class="admin"  @click.stop="infoVisible=!infoVisible">
                <b>{{nickname}}</b>
                <span></span>
            </div>
            <div class="head_portrait">
                <transition name="slide-fade">
                    <div class="my_info" v-show="infoVisible">
                        <div class="info_top" @click="editPassword">修改密码</div>
                        <div class="info_bottom" @click="logout">退出登录</div>
                    </div>
                </transition>
            </div>
        </div>
    </header>
    <section  @click="infoVisible=false">
        <div class="menu">
            <el-menu style="height:100%;" text-color="#23FFF1" active-text-color="#fff" :default-active="defaultActive"  @select="handleMenu" background-color="#242424" class="el-menu-vertical-demo"  :collapse="isCollapse">
                <!-- <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-model_1"></i>
                        <span slot="title">车辆运行统计</span>
                    </template>
                    <el-menu-item index="1-1" @click="clickMenu('driving_behavior')" class="menu-icon "><span></span><b>驾驶行为分析</b></el-menu-item>
                    <el-menu-item index="1-2" @click="clickMenu('daily_alarm')" class="menu-icon"><span></span><b>每日告警详情</b></el-menu-item>
                    <el-menu-item index="1-3" @click="clickMenu('vehicle_mileage')" class="menu-icon"><span></span><b>车辆里程分析</b></el-menu-item>
                    <el-menu-item index="1-4" @click="clickMenu('vehicle_integrated')" class="menu-icon"><span></span><b>车辆综合评分</b></el-menu-item>
                </el-submenu> -->
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-model_2"></i>
                        <span slot="title">车辆行程分析</span>
                    </template>
                    <!-- <el-menu-item index="2-1" @click="clickMenu('daily_schedule')" class="menu-icon"><span></span><b>每日行程统计</b></el-menu-item> -->
                    <!-- <el-menu-item index="2-2" @click="clickMenu('acc_state')" class="menu-icon"><span></span><b>ACC状态统计</b></el-menu-item> -->
                    <!-- <el-menu-item index="2-2" @click="clickMenu('schedule_detail')" class="menu-icon"><span></span><b>行程详情</b></el-menu-item> -->
                    <!-- <el-menu-item index="2-3" @click="clickMenu('schedule_detail-gps')" class="menu-icon"><span></span><b>行程gps详情</b></el-menu-item> -->
                    <el-menu-item index="2-4" @click="clickMenu('schedule_detail-gps-mongo')" class="menu-icon"><span></span><b>mongodb行程</b></el-menu-item>
                    <!-- <el-menu-item index="2-5" @click="clickMenu('daily_trip_validation2')" class="menu-icon"><span></span><b>切割行程验证</b></el-menu-item> -->
                </el-submenu>
				<!-- <el-submenu index="3">
				    <template slot="title">
				        <i class="el-icon-model_3"></i>
				        <span slot="title">故障报警分析</span>
				    </template>
				    <el-menu-item index="3-1" @click="clickMenu('fault_overview')" class="menu-icon"><span></span><b>故障报警总览</b></el-menu-item>
				    <el-menu-item index="3-2" @click="clickMenu('fault_detail')" class="menu-icon"><span></span><b>故障报警详情</b></el-menu-item>
				</el-submenu> -->
				<el-submenu index="4">
				    <template slot="title">
				        <i class="el-icon-model_2"></i>
				        <span slot="title">行程数据验证</span>
				    </template>
				    <!-- <el-menu-item index="4-1" @click="clickMenu('daily_trip_validation')" class="menu-icon"><span></span><b>轨迹验证</b></el-menu-item> -->
				    <!-- <el-menu-item index="4-2" @click="clickMenu('validations/validation_loss_trip')" class="menu-icon"><span></span><b>行程轨迹验证</b></el-menu-item> -->
				    <!-- <el-menu-item index="4-3" @click="clickMenu('validations/validation_loss_trip_detail')" class="menu-icon"><span></span><b>丢失行程详情</b></el-menu-item> -->
				    <el-menu-item index="4-4" @click="clickMenu('operate-gps-list')" class="menu-icon"><span></span><b>补点删点列表</b></el-menu-item>
				    <!-- <el-menu-item index="4-4" @click="clickMenu('validations/validation_longTime_trip')" class="menu-icon"><span></span><b>行程超过2小时</b></el-menu-item> -->
				    <!-- <el-menu-item index="4-5" @click="clickMenu('validations/validation_longDistance_trip')" class="menu-icon"><span></span><b>行程超过100km</b></el-menu-item> -->
				    <!-- <el-menu-item index="4-6" @click="clickMenu('validations/validation_lnglatzero_trip')" class="menu-icon"><span></span><b>起始经纬度为0</b></el-menu-item> -->
				    <!-- <el-menu-item index="4-7" @click="clickMenu('validations/validation_valid_gps')" class="menu-icon"><span></span><b>经纬度异常</b></el-menu-item> -->
				    <!-- <el-menu-item index="4-8" @click="clickMenu('validations/validation_valid_valid')" class="menu-icon"><span></span><b>里程偏差大于10%</b></el-menu-item> -->
				</el-submenu>	
        </div>
        <div class="main" >
            <div class="iframe">
                <iframe :src="iframeSrc" frameborder="0" scrolling="no"></iframe>
            </div>
        </div>
    </section>
    <el-dialog title="修改密码"  :visible.sync="passwordDialogVisible" width="40%" center>
        <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="100px" style="padding-right:10%;">
            <el-form-item label="当前密码" prop="oldPassword">
                <el-input v-model="passwordForm.oldPassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="passwordForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="repassword">
                <el-input v-model="passwordForm.repassword"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="passwordDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmEditPassword">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script type="text/javascript">
    document.write("<script type='text/javascript' src='js/prototype.js?v=" + Math.random() + "'><\/script>");
</script>
<script>
    var myVue = new Vue({
        el: ".index_wrap",
        data: {
            fullscreenLoading:false,    //全屏Loading
            passwordDialogVisible:false, //修改密码
            isCollapse:false,        //菜单是否收起
            infoVisible:false,        //个人中心模态框是否显示
            isFullScreen:false,         //是否全屏
            defaultActive:'2-4',          //默认展开第几个菜单
            nickname:'管理员',        //用户名
            passwordForm:{
                oldPassword:'',
                password:'',
                repassword:''
            },  //修改密码的数据
            rules: {
                oldPassword: [
                    { required: true, message: '请输入当前密码', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
                repassword: [
                    { required: true, message: '请重复输入新密码', trigger: 'blur' }
                ]
            },
            iframeSrc:"main/schedule_detail-gps-mongo.html"          //iframe的src
        },
        methods: {
            getData:function(){
            },
            handleMenu(index){
                console.log(index);
                this.defaultActive=index;
            },
            //点击菜单的函数   
            clickMenu:function(url){
                iframesrc='main/'+url+'.html?ran='+ Math.random();
                this.iframeSrc=iframesrc;
                window.scrollTo(0,0);
            },
            //修改密码
            editPassword(){
                this.infoVisible=false;
                this.passwordDialogVisible=true;
            },
            //退出登录
            logout(){
                localStorage.removeItem("token");
                window.location.href="login.html";
            },
            // 确认修改密码  
            confirmEditPassword(){
                var _this=this;
                this.$refs.passwordForm.validate((valid) => {
                    if (valid) {
                        if(_this.passwordForm.password===_this.passwordForm.repassword){
                            var json=JSON.parse(JSON.stringify(_this.passwordForm));
                            $.ajax({
                                type: 'post',   //POST/PUT/DELETE/HEAD...
                                url:globalUrl+"/user/reset/password",
                                beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
                                data:JSON.stringify(json),
                                dataType: 'json',	//text/script/xml/json/jsonp
                                contentType:"application/json; charset=UTF-8",
                                success: function (data) {
                                    if(data.code===0){
                                        _this.passwordDialogVisible=false;
                                        _this.$message.success('密码修改成功!');
                                    }else{
                                        _this.$message(data.message);
                                    }
                                }
                            });
                        }else{
                            _this.$message.error('抱歉,您两次输入的密码不一致!');
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //刷新嵌套页面
            reload(){
                $('iframe')[0].contentWindow.location.reload();
            },
			reloadPage(){
				window.location.reload();
			},
            //全屏
            fullScreen:function() {
                var element = document.documentElement;
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
                this.isFullScreen=true;
            },
            //退出全屏
            exitFullscreen:function() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
                this.isFullScreen=false;
            }
        },
        mounted: function () {
            this.getData();
        }
    });
    function linkNewPage(name,defaultActive,state){
       myVue.clickMenu('list_claim',name,1,state,defaultActive);
    }
</script>
</body>
</html>